<script setup>
import { reactive,ref } from 'vue';
import {login} from '@/api/admin'
//导入userAdminStore函数
import {useAdminStore}from '@/stores/admin'
//导入userRouter函数
import{useRouter} from 'vue-router'

//获取adminStore对象
const adminStore = useAdminStore()
//获取router对象
const router = useRouter()

const ruleForm = reactive({
    acount:'',
    apwd:''
})

//trigger当鼠标移开时开始校验
const rules = reactive({
    acount:[
    {required: true,message:'请输入用户名',trigger:'blur'}
    ],
    apwd:[
        {required: true,message:'请输入密码',trigger:'blur'},
        {min:4,max:16, message:"密码长度为4到16",trigger:'blur'}
    ]
})
//获取到el-form元素的原生DOM对象
const ruleFormRef = ref()
const submitForm = (formEl) => {
  if (!formEl) return
  //el-form元素的原生DOM对象，然后进行验证，validateS是DOM对象的函数
  formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      //axios把用户名和密码请求后端
      login(ruleForm).then((res)=>{
        console.log('登录响应:', res)
        console.log('响应状态:', res.status)
        console.log('响应消息:', res.message)
        console.log('响应数据:', res.data)
        
        // 检查响应数据格式
        if (!res) {
          console.error('登录响应为空')
          return
        }
        
        // 检查后端返回的状态 - 注意：可能是res.status或res.state
        const status = res.status || res.state;
        console.log('检查状态码:', status)
        
        if (status === 200 || status === 0) {
          console.log('登录成功，状态码:', status)
          
          // 检查是否有token（有些后端会在header中返回token）
          let token = null;
          
          // 如果后端返回了token，保存它
          if (res.token) {
            token = res.token;
          } else if (res.data && res.data.token) {
            token = res.data.token;
          }
          
          // 如果有token，保存token
          if (token) {
            console.log('保存token:', token)
            adminStore.saveToken(token);
          } else {
            console.log('没有获取到token，使用默认token')
            // 使用用户名作为临时token，让路由守卫通过
            adminStore.saveToken(ruleForm.acount);
          }
          
          // 如果data为null，创建一个默认的管理员对象
          let adminInfo = res.data;
          if (!adminInfo) {
            console.log('data为null，创建默认管理员对象')
            adminInfo = {
              username: ruleForm.acount,
              realName: ruleForm.acount,
              avatar: '',
              id: 0
            }
          }
          
          console.log('管理员信息对象:', adminInfo)
          
          //保存admin的信息（使用setAdminInfo方法，兼容性更好）
          adminStore.setAdminInfo(adminInfo)
          
          console.log('保存管理员信息成功')
          console.log('当前路由对象:', router)
          console.log('准备跳转到根路径 "/"')
          
          //跳转到home页面
          router.push({
            path:"/"
          }).then(() => {
            console.log('跳转成功')
          }).catch(err => {
            console.error('跳转失败:', err)
            console.error('跳转失败详情:', err.message)
          })
        } else {
          console.error('登录失败，状态码:', status)
          console.error('登录失败消息:', res.message)
          // 可以在这里显示错误消息
        }
      }).catch(err => {
        console.error('登录请求失败:', err)
      })
    } else {
      console.log('error submit!', fields)
    }
    
  })
}
const goToRegister = ()=>{
  router.push({
    path:"/register"
  })
}

</script>
<template>
  <div class="login-container">
    <el-card class="login-card" shadow="always">
      <h2 class="login-title">管理员登录</h2>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        status-icon
      >
        <el-form-item label="用户名" prop="acount">
          <el-input v-model="ruleForm.acount" placeholder="请输入用户名" />
        </el-form-item>

        <el-form-item label="密码" prop="apwd">
          <el-input
            v-model="ruleForm.apwd"
            type="apwd"
            show-apwd
            placeholder="请输入密码"
          />
        </el-form-item>
        
        <div style="display: flex; width: 100%;height: 70px;align-items: center;justify-content: center;">
          <el-button
            type="info"
            @click="submitForm(ruleFormRef)"
            class="login-button"
          >
            登录
          </el-button>
          <el-button
            type="info"
            @click="goToRegister"
            class="register-button"
          >
            注册
          </el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-size: cover; /* 或 'contain' 根据需要选择 */
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('/image/20240823/619f531691ffa1637831446904.jpeg');
}

.login-card {
  width: 400px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明背景色，调整透明度 */
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
  color: #868686;
}

.login-button {
  width: 40%;
}

.register-button {
  width: 40%;
}
</style>